<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Vue + Element Plus 示例</title>
  <!-- 引入 Element Plus 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <!-- 引入 Element Plus 组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    .app-container {
      padding: 20px;
    }
    .query-form {
      border: 1px solid #ebeef5;
      padding: 20px;
      margin-bottom: 20px;
    }
    .query-form .el-form-item {
      margin-bottom: 10px;
    }
    .table-container {
      margin-top: 20px;
    }
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .hidden-form {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script type="module">
    const { createApp, ref } = Vue;
    const { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElRow, ElCol, ElTable, ElTableColumn, ElPagination, ElDatePicker, ElRadioGroup, ElRadio, ElDescriptions, ElDescriptionsItem } = ElementPlus;

    const App = {
      components: {
        ElForm,
        ElFormItem,
        ElInput,
        ElSelect,
        ElOption,
        ElButton,
        ElRow,
        ElCol,
        ElTable,
        ElTableColumn,
        ElPagination,
        ElDatePicker,
        ElRadioGroup,
        ElRadio,
        ElDescriptions,
        ElDescriptionsItem
      },
      template: `
        <div class="app-container">
          <h3 style="display: flex; align-items: center; justify-content: space-between;">
            体检客户查询
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </h3>
          <!-- 隐藏的表单区域 -->
          <div class="query-form hidden-form">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="手机号">
                    <el-input v-model="queryForm.phone" placeholder="输入搜索的手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="姓名">
                    <el-input v-model="queryForm.name" placeholder="输入预约体检的客户信息"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-select v-model="queryForm.gender" placeholder="选择性别">
                      <el-option label="男" value="male"></el-option>
                      <el-option label="女" value="female"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="预约院区">
                    <el-select v-model="queryForm.hospital" placeholder="选择院区地址">
                      <el-option label="熙康云医院-浑南院区" value="hospitalA"></el-option>
                      <el-option label="熙康云医院-三好街院区" value="hospitalB"></el-option>
                      <el-option label="熙康云医院-世纪大厦" value="hospitalC"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="是否归档">
                    <el-radio-group v-model="queryForm.archived">
                      <el-radio :label="false">未归档</el-radio>
                      <el-radio :label="true">已归档</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="套餐类型">
                    <el-select v-model="queryForm.packageType" placeholder="预约套餐">
                      <el-option label="23东软家属已婚女士套餐C" value="package1"></el-option>
                      <el-option label="套餐2" value="package2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="体检时间">
                    <el-date-picker v-model="queryForm.date" type="date" placeholder="Pick a day"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 描述列表区域 -->
          <div class="query-form">
            <el-descriptions title="查询条件" :column="3" border>
              <el-descriptions-item label="手机号">
                <el-input v-model="queryForm.phone" placeholder="输入搜索的手机号"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="姓名">
                <el-input v-model="queryForm.name" placeholder="输入预约体检的客户信息"></el-input>
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                <el-select v-model="queryForm.gender" placeholder="选择性别">
                  <el-option label="男士" value="male"></el-option>
                  <el-option label="已婚女士" value="female"></el-option>
				  <el-option label="未婚女士" value="emale"></el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="预约院区">
                <el-select v-model="queryForm.hospital" placeholder="选择院区地址">
                  <el-option label="熙康云医院-浑南院区" value="hospitalA"></el-option>
                  <el-option label="熙康云医院-三好街院区" value="hospitalB"></el-option>
                  <el-option label="熙康云医院-世纪大厦" value="hospitalC"></el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="是否归档">
                <el-radio-group v-model="queryForm.archived">
                  <el-radio :label="false">未归档</el-radio>
                  <el-radio :label="true">已归档</el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="套餐类型">
                <el-select v-model="queryForm.packageType" placeholder="预约套餐">
                  <el-option label="23东软家属已婚女士套餐A" value="package1"></el-option>
                  <el-option label="23东软家属已婚女士套餐B" value="package2"></el-option>
				  <el-option label="23东软家属已婚女士套餐C" value="package3"></el-option>
				  <el-option label="23东软家属已婚女士套餐D" value="package4"></el-option>
                </el-select>
              </el-descriptions-item>
              <el-descriptions-item label="体检时间">
                <el-date-picker v-model="queryForm.date" type="date" placeholder="Pick a day"></el-date-picker>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 数据表格区域 -->
          <div class="table-container">
            <h4>预约客户查询列表</h4>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
              <el-table-column prop="customerName" label="客户姓名"></el-table-column>
              <el-table-column prop="customerPhone" label="客户手机号"></el-table-column>
              <el-table-column prop="hospital" label="预约院区"></el-table-column>
              <el-table-column prop="packageType" label="预约套餐"></el-table-column>
              <el-table-column prop="appointmentDate" label="预约时间"></el-table-column>
              <el-table-column prop="archived" label="是否归档">
                <template #default="scope">
                  {{ scope.row.archived ? '已归档' : '未归档' }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <div style="display: flex; align-items: center; gap: 10px;">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">取消预约</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="50">
            </el-pagination>
          </div>
        </div>
      `,
      setup() {
        const queryForm = ref({
          phone: '',
          name: '',
          gender: '',
          hospital: '',
          packageType: '',
          date: '',
          archived: false
        });

        const tableData = [
          {
            orderNumber: '2023100256211023',
            customerName: '张一山',
            customerPhone: '13100000000',
            hospital: '熙康云医院-浑南院区',
            packageType: '23东软家属已婚女士套餐C',
            appointmentDate: '2015-02-12',
            archived: true
          },
		  {
		    orderNumber: '2023100256211023',
		    customerName: '张一山',
		    customerPhone: '13100000000',
		    hospital: '熙康云医院-浑南院区',
		    packageType: '23东软家属已婚女士套餐C',
		    appointmentDate: '2015-02-12',
		    archived: true
		  },
		  {
		    orderNumber: '2023100256211023',
		    customerName: '张一山',
		    customerPhone: '13100000000',
		    hospital: '熙康云医院-浑南院区',
		    packageType: '23东软家属已婚女士套餐C',
		    appointmentDate: '2015-02-12',
		    archived: true
		  },
		  {
		    orderNumber: '2023100256211023',
		    customerName: '张一山',
		    customerPhone: '13100000000',
		    hospital: '熙康云医院-浑南院区',
		    packageType: '23东软家属已婚女士套餐C',
		    appointmentDate: '2015-02-12',
		    archived: true
		  },
		  {
		    orderNumber: '2023100256211023',
		    customerName: '张一山',
		    customerPhone: '13100000000',
		    hospital: '熙康云医院-浑南院区',
		    packageType: '23东软家属已婚女士套餐C',
		    appointmentDate: '2015-02-12',
		    archived: true
		  },
		  {
		    orderNumber: '2023100256211023',
		    customerName: '张一山',
		    customerPhone: '13100000000',
		    hospital: '熙康云医院-浑南院区',
		    packageType: '23东软家属已婚女士套餐C',
		    appointmentDate: '2015-02-12',
		    archived: true
		  },
		  
		
          // 其他数据项...
        ];

        function onSubmit() {
          console.log('submit!', queryForm.value);
        }

        function handleEdit(index, row) {
          console.log('edit!', index, row);
        }

        function handleDelete(index, row) {
          console.log('delete!', index, row);
        }

        return {
          queryForm,
          tableData,
          onSubmit,
          handleEdit,
          handleDelete
        };
      }
    };

    const app = createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</body>
</html>




